import React, { Component } from 'react';
import classnames from 'classnames';
import { Link } from 'react-router';
import { inject, observer } from 'mobx-react';
import { Toast, ListView, Picker, Flex, SegmentedControl, DatePicker, Button, List, WingBlank, WhiteSpace, Result, Icon } from 'antd-mobile'
import { createForm } from 'rc-form';
import _ from 'lodash';
import Top from 'components/top'
import Ajax from 'lib/Ajax'

const pageName = 'planSubmit'

@inject('appStore', 'languageStore')
@observer
class ModuleName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ajaxState: 1
    }
  }

  componentDidMount(){

  }

  submit = () => {
    const self = this;
    const option = this.props.form.getFieldsValue();
    if(this.state.ajaxState == 2){
      return
    }
    if(option.countryId){
      option.countryId = option.countryId[0]
    }else{
      Toast.info('请选择意向国家');
      return
    }
    if(option.educationId){
      option.educationId = option.educationId[0]
    }else{
      Toast.info('请选择申请学历');
      return
    }
    if(option.planTime){
      option.planTime = option.planTime.format('YYYY-MM-DD')
    }else{
      Toast.info('请选择计划出国时间');
      return
    }
    if(option.nowGrade){
      option.nowGrade = option.nowGrade[0]
    }else{
      Toast.info('请选择目前就读年级');
      return
    }
    self.setState({
      ajaxState: 2
    });
    Ajax({
      url: '/plan/submit',
      data: option,
      success: function(result){
        self.setState({
          ajaxState: 3
        });
      },
      error: function(error){
        Toast.info(error||'请求失败');
        self.setState({
          ajaxState: -1
        });
      }
    });
  }

  renderBody = () => {
    const pageData = this.props.languageStore.getPageData(pageName);
    const { getFieldProps } = this.props.form;
    const { imgBaseUrl, commonData } = this.props.appStore;
    const { ajaxState } = this.state;
    const countryEn = (commonData.countryEn||[]).map(item => {
      return {
        value: item.code,
        label: item.mean
      }
    });
    const educationEn = (commonData.eductionTypeEn||[]).map(item => {
      return {
        value: item.code,
        label: item.mean
      }
    });
    const nowGradeEn = (commonData.nowGradeTypeEn||[]).map(item => {
      return {
        value: item.code,
        label: item.mean
      }
    });
    if(ajaxState == -1){
      return <Result
                img={<Icon type="cross-circle-o" className="icon" style={{ fill: '#F13642' }} />}
                title="提交失败"
                message=""
              />
    }else if(ajaxState == 3){
      return <Result
                img={<Icon type="check-circle" className="icon" style={{ fill: '#1F90E6' }} />}
                title="提交成功"
                message=""
              />
    }else{
      return <div>
        <List>
          <Picker data={countryEn} cols={1} {...getFieldProps('countryId')}>
            <List.Item arrow="horizontal">意向国家</List.Item>
          </Picker>
          <Picker data={educationEn} cols={1} {...getFieldProps('educationId')}>
            <List.Item arrow="horizontal">申请学历</List.Item>
          </Picker>
          <DatePicker
            mode="date"
            title="选择日期"
            {...getFieldProps('planTime', {

            })}
          >
            <List.Item arrow="horizontal">计划出国时间</List.Item>
          </DatePicker>
          <Picker data={nowGradeEn} cols={1} {...getFieldProps('nowGrade')}>
            <List.Item arrow="horizontal">目前就读年级</List.Item>
          </Picker>
        </List>
        <WhiteSpace size="lg"/>
        <WingBlank size="lg">
          <Button className="btn" type="primary" onClick={this.submit}>提交</Button>
        </WingBlank>
      </div>
    }
  }

  render() {
    const pageData = this.props.languageStore.getPageData(pageName);
    return (
      <div className={`${pageName} result`}>
        <Top title={pageData.title}/>
        {
          this.renderBody()
        }
      </div>
    )
  }
}


module.exports = createForm()(ModuleName)
